<template>
  <view class="yg-gd">
    <view class="yg-gd-content">
      <!-- 轮播图 -->
      <u-swiper :list="goodInfo.pics"
                height="500"
                name="pics_mid"
                @click="handlePreviewImage()"></u-swiper>

      <!-- 价格区域的开始 -->
      <view class="yg-gd-price">
        <!-- 标价 -->
        <view class="gd-price-left">
          ￥{{ goodInfo.goods_price || "" }}
        </view>
        <view class="gd-price-right">
          <!-- 分享 -->
          <view class="share">
            <view class="iconfont icon-fenxiang">
            </view>
            <button type="default"
                    size="mini"
                    open-type="share"></button>
          </view>
          <!-- 收藏 -->
          <view class="collect"
                @click="handleCollect()">
            <view :class=" [ 'iconfont', isCollected ? 'icon-shoucang_gaoliang' : 'icon-shoucang' ] ">

            </view>
          </view>
        </view>
      </view>
      <!-- 价格区域的结束 -->

      <!-- 商品详情标题开始 -->
      <view class="yg-gd-title">
        {{ goodInfo.goods_name }}
      </view>
      <!-- 商品详情标题结束 -->

      <u-gap height="20"
             bg-color="#F9F9F9"></u-gap>

      <!-- 图文详情的开始 -->
      <view class="yg-gd-rtext">
        <view class="title">
          图文详情
          <!-- https://uniapp.dcloud.io/component/rich-text -->
          <!-- <rich-text :nodes="nodes"></rich-text>
          <rich-text :nodes="strings"></rich-text> -->
        </view>
        <rich-text :nodes="goodInfo.goods_introduce"></rich-text>

      </view>
      <!-- 图文详情的结束 -->
    </view>

    <!-- 底部的tabbar开始 -->
    <view class="yg-gd-tabbar">
      <view class="gd-tabbar-item">
        <view class="iconfont icon-lianxikefu">
          <!-- <u-icon name="kefu-ermai"></u-icon> -->
        </view>
        <view class="tabbar-item-text">
          联系客服
        </view>
        <button type="default"
                open-type="contact"></button>
      </view>

      <view class="gd-tabbar-item"
            @click="handleGoToCart()">
        <view class="iconfont icon-gouwuche">

        </view>
        <view class="tabbar-item-text">
          购物车
        </view>
      </view>

      <u-button class="gd-tabbar-item"
                type="warning"
                shape="circle"
                @click="handleAddCart()">加入购物车</u-button>
      <u-button class="gd-tabbar-item"
                type="error"
                shape="circle"
                @click="handleGoToPay()">立即购买</u-button>
      <!-- <view 
            ">
        <view class="tabbar-item-pay">
          立即购买
        </view>
    </view> -->
    </view>
    <!-- 底部tabbar结束 -->
  </view>
</template>

<script>
export default {
  onLoad({ goods_id }) {
    this.goodsId = goods_id
    this.getGoodsDetailFn(goods_id)
  },
  data() {
    return {
      goodInfo: {},
      goodsId: '',
      collectArr: uni.getStorageSync('collect') || [],
      shopCarts: uni.getStorageSync('carts') || [],
    }
  },
  computed: {
    isCollected() {
      return this.collectArr.some((v) => v === this.goodsId)
    },
  },
  watch: {
    collectArr: {
      deep: true,
      handler(val) {
        uni.setStorageSync('collect', val)
      },
    },
    shopCarts: {
      deep: true,
      handler(val) {
        uni.setStorageSync('carts', val)
      },
    },
  },
  methods: {
    async getGoodsDetailFn(id) {
      const res = await this.$u.api.getGoodsDetailAPI(id)
      this.goodInfo = res
    },
    // 预览大图
    handlePreviewImage(current) {
      // https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject 图片预览的接口
      const urls = this.goodInfo.pics.map((v) => v.pics_mid)
      uni.previewImage({ urls, current })
    },
    // 收藏至本地缓存
    handleCollect() {
      // 取下标
      const index = this.collectArr.findIndex((v) => v === this.goodsId)
      // 状态切换
      index === -1
        ? this.collectArr.push(this.goodsId)
        : this.collectArr.splice(index, 1)
    },
    handleGoToCart() {
      uni.switchTab({
        url: '/pages/cart/cart',
      })
    },
    handleGoToPay() {
      uni.navigateTo({
        url: '/pages/pay/pay',
      })
    },
    handleAddCart() {
      const index = this.shopCarts.findIndex((v) => v.goods_id == this.goodsId)
      if (index === -1) {
        this.shopCarts.push({
          ...this.goodInfo,
          num: 1,
          checked: true,
        })
        uni.showToast({ title: '添加到购物车成功' })
      } else if (index !== -1) {
        const isFull =
          this.shopCarts[index].num + 1 >= this.goodInfo.goods_number
        if (isFull) uni.showToast({ title: '超过最大库存' })
        else if (!isFull) {
          this.shopCarts[index].num++
          uni.showToast({ title: '添加到购物车成功' })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.yg-gd {
  .yg-gd-content {
    height: calc(100vh - 100rpx);
    overflow-y: scroll;

    .yg-gd-swiper {
      height: 500rpx;

      swiper {
        height: 500rpx;

        swiper-item {
          display: flex;
          align-items: center;
          justify-content: center;

          image {
          }
        }
      }
    }

    .yg-gd-price {
      display: flex;
      height: 60rpx;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;

      .gd-price-left {
        color: #ec5763;
      }

      .gd-price-right {
        display: flex;

        .share {
          position: relative;
          margin-right: 30rpx;

          .iconfont-fenxiang {
          }

          button {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }

        .collect {
          .icon-shoucang {
          }

          .icon-shoucang_gaoliang {
            color: red;
          }
        }
      }
    }

    .yg-gd-title {
      width: 100vw;
      padding: 20rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .yg-gd-rtext {
      .title {
        text-align: center;
        height: 100rpx;
        line-height: 100rpx;
      }
    }
  }

  .yg-gd-tabbar {
    border-top: 1px solid #dedede;
    width: 100vw;
    height: 100rpx;
    display: flex;
    .iconfont {
      font-size: 40rpx;
    }
    .gd-tabbar-item:nth-child(1) {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .tabbar-item-text {
        font-size: 20rpx;
      }
      button {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .gd-tabbar-item:nth-child(2) {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .iconfont {
      }
      .tabbar-item-text {
        font-size: 20rpx;
      }
    }
    .gd-tabbar-item:nth-child(3) {
      flex: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      .tabbar-item-btn {
        height: 60rpx;
        width: 196rpx;
        border-radius: 30rpx;
        background-color: #fcaa23;
        color: white;
        font-size: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .gd-tabbar-item:nth-child(4) {
      flex: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      .tabbar-item-pay {
        height: 60rpx;
        width: 196rpx;
        border-radius: 30rpx;
        background-color: #ea4350;
        color: white;
        font-size: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>